<template>
    <!-- OperateComponent包括不同类型元素的共同行为 -->
    <div class="OperateComponent">
        <component :is="currOperate"></component>
    </div>
</template>
<script setup>
let props = defineProps({
    'element': Object
})
import TextElementOperate from './TextElementOperate.vue';
// 获取当前添加元素类型
import { UseMainStore } from '@/stores/index';
import { storeToRefs } from 'pinia';
import { watchEffect, watch, ref } from 'vue';

let { CreatingElement } = storeToRefs(UseMainStore())
let ElementTypeMap = {
    'text': TextElementOperate
}
// 匹配当前展示的operate组件
let currOperate = ref(null);
watch(CreatingElement, () => {
    console.log('watch---------', CreatingElement.value)
    if (CreatingElement?.value?.position) {
        currOperate.value = ElementTypeMap[CreatingElement.value.type];
    } else {
        currOperate.value = null
    }

})
// watchEffect(() => {
//     console.log('watchEffect-----');
//     console.log('CreatingElement-----', CreatingElement)
//     currOperate = ElementTypeMap[CreatingElement?.value?.type];
// })
// console.log('TextElementOperate----------', TextElementOperate)
// console.log('currOperate------', currOperate);
// console.log('CreatingElement.type-----', CreatingElement.value.type)
</script>
<style lang="scss" scoped></style>